import React, { Component } from "react";
import  {reqCategorys,reqUpdataCategory,reqAddCategory} from "../../api/index"
import { Card, Table, Button, Icon,Modal, } from "antd";
import Updataform from "./updataform";
import Addfrom from "./addform";
class Category extends Component {
  constructor(props) {
    super(props);
    this.state = {
        loading:false,
        categorys:[],//一级分类列表
        parentId:"0",//默认0
        subCategorys:[],//子分类
        parentName:"",
        showStatus:0,
    };
  }
  initColumns=()=>{
      this.columns=[
          {
              title:"分类名称",
              dataIndex:"name"
          },
          {
              title:"操作",
              render:(categorys)=>(
                  <span>
                      <span onClick={()=>this.showUpdate(categorys)}>修改分类</span>
                      {this.state.parentId==="0"?( <span onClick={()=>this.showSubCategorys(categorys)}>查看子分类</span>):null}
                     
                  </span>
              )
          }
      ]
  }
  componentWillMount(){
    this.initColumns()
  }
  componentDidMount(){
      this.getCategorys()
  }
  getCategorys= async(parentId)=>{
     this.setState({loading:true})
     parentId=parentId||this.state.parentId
    const result=await reqCategorys(parentId)
    this.setState({loading:false})
    console.log(result);
    if(result.status===0){
        const categorys=result.data
        if(this.state.parentId==="0"){
            this.setState({categorys:categorys})
        }else{
            this.setState({
                subCategorys:categorys
            })
        }
    }
  }
//   显示二级分类
  showSubCategorys=(categorys)=>{
  this.setState({
    parentId:categorys._id,
    parentName:categorys.name
  },()=>{
    this.getCategorys()
  })
  }
  showCategorys=()=>{
    this.setState({
      parentId:"0",
      parentName:"",
      subCategorys:[],
    })
  }
  showUpdate=(categorys)=>{
    console.log(categorys);
    this.categorys=categorys
    this.setState({
      showStatus:2
    })
  }
  showAdd=()=>{
    this.setState({
      showStatus:1
    })
  }
  // 取消
  handleCancel=()=>{
    this.setState({
      showStatus:0
    })
  }
  // 添加分类
  addCategory=()=>{
    this.form.validateFields(async(err,values)=>{
         if(!err){
           this.setState({
             showStatus:0
           })
           const {parentId,categoryName} =values
           this.form.resetFields()
           const result=await reqAddCategory(parentId,categoryName)
           if(result.status==0){
             //表示添加得事当前分类下面得分类
             if(parentId==this.state.parentId){
               this.getCategorys()
             }else if(parentId==="0"){
               //二级分类下面添加一级分类
               this.getCategorys("0")
             }
           }
         }
    })
  }
  // 修改分类
  updateCategory=()=>{
      console.log("update");
      this.form.validateFields(async(err,values)=>{
        if(!err){
          console.log(values);
          this.setState({showStatus:0})
          const categoryId=this.categorys._id
          console.log(categoryId);
          const {categoryName}=values;
          this.form.resetFields()//清空表单数据
          const result=await reqUpdataCategory(categoryId,categoryName)
          if(result.status===0){
         this.getCategorys();
          }
        }
      })
  }
  render() {
      const category=this.categorys ||{}
      const {loading,categorys,parentId,subCategorys,parentName,showStatus}=this.state
      const title=parentId==="0"?"一级分类列表":(<>  <span onClick={this.showCategorys}>一级分类列表</span> <span>{parentName}</span></>)
    const extra = (
      <Button type="primary" icon="plus"  onClick={this.showAdd}>
        添加
      </Button>
    );
    return (
      <Card title={title} extra={extra}>
         <Table 
         dataSource={parentId==="0"?categorys:subCategorys}
         columns={this.columns} 
         loading={loading}
         rowKey="_id"
         pagination={{
             defaultCurrent:1,
             defaultPageSize:5

         }}

         />
         <Modal 
         title="添加分类" 
         visible={showStatus==1}
         onCancel={this.handleCancel}
         onOk={this.addCategory}
         >
           <Addfrom 
           categorys={categorys} 
           parentId={parentId} 
           setForm={(form)=>{this.form=form}}/>
         
           </Modal>
          <Modal
          title="修改分类"
          visible={showStatus==2}
          onOk={this.updateCategory}
          onCancel={this.handleCancel}
        >
          <Updataform categoryName={category.name} setForm={(form)=>{this.form=form}} />
        </Modal>
      </Card>
    );
  }
}

export default Category;
